<!-- 热销商品图表 -->
<template>
	<div class='com-container'>
		<div class='com-chart' ref='hot_ref'></div>
		<span :style="comStyle" @click="toLeft" class="iconfont icon-arrow-lift"></span>
		<span :style="comStyle" @click="toRight" class="iconfont icon-arrow-right"></span>
		<span :style="comStyle" class="cat-name">{{catName}}</span>
	</div>
</template>
<script>
	import {mapState} from 'vuex'
	import { getThemeValue } from '@/utils/theme_utils'
	
	export default {
		data() {
			return {
				chartInstance: null,
				allData: null,
				currentIndex: 0,
				titleFontsize: 0,
			}
		},
		
		watch: {
			theme() {
				this.chartInstance.dispose()
				this.initChart()
				this.screenAdapter()
				this.updateChart()
			}
		},
		mounted() {
			this.initChart()
			this.getData()
			window.addEventListener('resize', this.screenAdapter)
			this.screenAdapter()
		},

		computed: {
			...mapState(['theme']),
			catName() {
				if (!this.allData) {
					return ''
				} else {
					return this.allData[this.currentIndex].name
				}
			},
			comStyle() {
				return {
					fontSize: this.titleFontsize + 'px',
					color: getThemeValue(this.theme).titleColor
				}
			}
		},
		destroyed() {
			window.removeEventListener('resize', this.screenAdapter)
		},
		methods: {
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.hot_ref, this.theme)
				const initOption = {
					title: {
						text: '▎热销商品占比',
						left: 20,
						top: 20
					},
					legend: {
						top: '15%',
						icon: 'circle'
					},
					tooltip: {
						show: true,
						formatter: arg => {
							const thirdCategory = arg.data.chilren
							let total = 0
							thirdCategory.forEach(item => {
								total += item.value
							})
							let retStr = ''
							thirdCategory.forEach(item => {
								retStr += `
									${item.name}: ${parseInt(item.value / total * 100) + '%'}<br/>
								`
							})
							return retStr
						}
					},
					series: [{
						type: 'pie',
						label: {
							show: false
						},
						emphasis: {
							label: {
								show: true
							},
							labelLine: {
								show: false
							}
						}
					}]
				}
				this.chartInstance.setOption(initOption)
			},
			async getData() {
				const {
					data: res
				} = await this.$http('hot')
				this.allData = res
				this.updateChart()
			},
			updateChart() {
				const legendData = this.allData[this.currentIndex].children.map(item => {
					return item.name
				})
				const seriesData = this.allData[this.currentIndex].children.map(item => {
					return {
						name: item.name,
						value: item.value,
						chilren: item.children
					}
				})
				const dataOption = {
					legend: {
						data: legendData
					},
					series: [{
						data: seriesData
					}]
				}
				this.chartInstance.setOption(dataOption)
			},
			screenAdapter() {
				this.titleFontsize = this.$refs.hot_ref.offsetWidth / 100 * 3.6
				
				const adapterOption = {
					title: {
						textStyle: {
							fontSize: this.titleFontsize
						}
					},
					legend: {
						itemWidth: this.titleFontsize,
						itemHeight: this.titleFontsize,
						itemGap: this.titleFontsize / 2,
						textStyle: {
							fontSize: this.titleFontsize / 2
						}
					},
					series: [
						{
							radius: this.titleFontsize * 4.5,
							center: ['50%', '60%']
						}
					]
				}
				this.chartInstance.setOption(adapterOption)
				this.chartInstance.resize()
			},
			toLeft() {
				this.currentIndex--
				if (this.currentIndex < 0) {
					this.currentIndex = 2
				}
				this.updateChart()
			},
			toRight() {
				this.currentIndex++
				if (this.currentIndex > 2) {
					this.currentIndex = 0
				}
				this.updateChart()
			},
		}
	}
</script>

<style lang='less' scoped>
	.icon-arrow-lift,
	.icon-arrow-right {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		color: #fff;
		cursor: pointer;
	}

	.icon-arrow-lift {
		left: 10%;
	}

	.icon-arrow-right {
		right: 10%;
	}

	.cat-name {
		position: absolute;
		left: 80%;
		bottom: 20px;
		color: #fff;
	}
</style>
